<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import router from '@/router'
const route = useRoute()
const userStore = useUserStore()
// 侧边栏状态管理
const isCollapsed = ref(false)

// 子菜单状态管理
// const submenuOpen = ref({
//   orderSource: false,
//   finance: false,
//   workOrder: false,
//   employeeManage: false,
//   customerManage: false,
//   supplierManage: false,
//   feedback: false,
//   system: false
// })

// 轮播图状态
const currentSlide = ref(0)
let slideInterval = null  // 注意：改为普通变量，避免ref监听

// 切换侧边栏展开/收起
const toggleSidebar = () => {
  isCollapsed.value = !isCollapsed.value
}

// 切换子菜单
// const toggleSubmenu = (key) => {
//   submenuOpen.value[key] = !submenuOpen.value[key]
// }

// 轮播图自动播放
onMounted(() => {
  startSlideInterval()
})

const startSlideInterval = () => {
  slideInterval = setInterval(() => {
    currentSlide.value = (currentSlide.value + 1) % 3
  }, 5000)
}

// 清理定时器（组件销毁前）
onBeforeUnmount(() => {
  if (slideInterval) {
    clearInterval(slideInterval)
  }
})
const handleCommand = (cmd) => {
  if (cmd === 'logout') {
      ElMessageBox.confirm('确定要退出登录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        // 清除登录信息
        localStorage.removeItem('token')
        localStorage.removeItem('UserInfo')
        localStorage.removeItem('roleLogos')
        userStore.$reset() // 恢复 pinia 初始状态
        router.replace('/')
        ElMessage.success('已退出登录')
      })
      .catch(() => {
        ElMessage.info('已取消退出')
      })
  }
}
</script>

<template>
  <div class="app-container">
    <!-- 侧边栏：通过isCollapsed控制展开/收起 -->
    <aside class="sidebar" :class="{ 'collapsed': isCollapsed }">
      <div class="logo-container">
        <!-- <img src="https://picsum.photos/40/40" alt="系统Logo" class="logo-img" /> -->
        <span class="logo-text" v-if="!isCollapsed">易腾工单系统</span>
      </div>

      <button class="toggle-btn" @click="toggleSidebar">
        <i class="icon" :class="isCollapsed ? 'icon-expand' : 'icon-collapse'"></i>
      </button>

      <nav class="menu">
        <ul>
           <li class="menu-item" :class="{ active: route.path === '/userHome' }">
            <router-link to="/userHome" class="menu-link">
              <el-icon><HomeFilled /></el-icon>
              <span v-if="!isCollapsed">首页</span>
            </router-link>
           </li>
            <li class="menu-item" :class="{ active: route.path === '/userWorkorder' }">
              <router-link to="/userWorkorder" class="menu-link">
                <el-icon><Money /></el-icon>
                <span v-if="!isCollapsed">所有工单</span>
              </router-link>
            </li>
            <li class="menu-item" :class="{ active: route.path === '/personalInfo' }">
              <router-link to="/personalInfo" class="menu-link">
                <el-icon><Message/></el-icon>
                <span v-if="!isCollapsed">所有评价</span>
              </router-link>
            </li>

        </ul>
      </nav>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 顶部导航栏 -->
      <header class="main-header">
        <div class="header-left">
        </div>
        <div class="header-right">
          <el-dropdown trigger="hover" @command="handleCommand">
            <div class="user-info">
              <img src="https://picsum.photos/32/32" alt="用户头像" class="user-avatar" />
              <span class="username">{{ userStore.UserInfo?.userName || '员工' }}</span>
              <i class="icon icon-chevron-down"></i>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </header>

      <!-- 轮播通知 -->
      <div class="notification-carousel">
        <div class="carousel-wrapper" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
          <div class="carousel-slide">系统将于本周五凌晨2点至5点进行维护，请提前做好准备</div>
          <div class="carousel-slide">新功能"批量导入"已上线，欢迎体验并反馈问题</div>
          <div class="carousel-slide">本月工单处理效率评比活动已开始，详情请查看公告</div>
        </div>
        <div class="carousel-indicators">
          <button v-for="(slide, index) in 3" :key="index"
                  :class="{ active: index === currentSlide }"
                  @click="currentSlide = index"></button>
        </div>
      </div>

      <!-- 动态内容区域：路由出口，渲染不同页面 -->
      <router-view />
    </main>
  </div>
</template>

<style scoped>
/* 保留原有样式，确保布局正常 */
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  width: 240px;
  background-color: #2c3e50;
  color: #ecf0f1;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 10;
  /* 新增以下样式 */
  height: 100vh; /* 固定高度为视口高度 */
  overflow-y: auto; /* 垂直方向内容超出时显示滚动条 */
  overflow-x: hidden; /* 禁止水平滚动 */
}

/* 保持折叠状态的滚动行为一致 */
.sidebar.collapsed {
  width: 64px;
  /* 继承父类的滚动设置，无需额外修改 */
}

.logo-container {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
}

.logo-text {
  margin-left: 12px;
  font-size: 18px;
  font-weight: 600;
  transition: opacity 0.3s ease;
}

.toggle-btn {
  width: 40px;
  height: 40px;
  margin: 12px auto;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* 菜单样式 */
.menu {
  padding-top: 10px;
}

.menu-item {
  list-style: none;
  margin-bottom: 4px;
}

.menu-link {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #bdc3c7;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.menu-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

.menu-item.active .menu-link {
  background-color: #3498db;
  color: white;
}

.menu-item.active .menu-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: #f1c40f;
}

.icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-home {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}

.icon-order {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.icon-task {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E");
}

.icon-staff {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='8.5' cy='7' r='4'/%3E%3Cline x1='20' y1='8' x2='20' y2='14'/%3E%3Cline x1='23' y1='11' x2='17' y2='11'/%3E%3C/svg%3E");
}

.icon-customer {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.icon-finance {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='17' y1='10' x2='3' y2='10'/%3E%3Cline x1='21' y1='6' x2='3' y2='6'/%3E%3Cline x1='21' y1='14' x2='3' y2='14'/%3E%3Cline x1='17' y1='18' x2='3' y2='18'/%3E%3Cpolyline points='16 6 16 10 20 10 20 6'/%3E%3Cpolyline points='16 14 16 18 20 18 20 14'/%3E%3C/svg%3E");
}

.icon-evaluation {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
}

.icon-settings {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

.icon-expand {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

.icon-collapse {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3C/svg%3E");
}

.icon-arrow {
  margin-left: auto;
  transition: transform 0.3s ease;
}

.arrow-right {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
}

.arrow-down {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cpolyline points='5 12 12 19 19 12'/%3E%3C/svg%3E");
  transform: rotate(90deg);
}

.submenu {
  background-color: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.submenu li {
  list-style: none;
}

.submenu a {
  display: block;
  padding: 10px 16px 10px 48px;
  color: #bdc3c7;
  text-decoration: none;
  transition: all 0.2s ease;
}

.submenu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  padding-left: 52px;
}

/* 主内容区样式 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background-color: #f5f7fa;
}

/* 顶部导航栏 */
.main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.page-title {
  font-size: 20px;
  color: #333;
  font-weight: 600;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.user-info:hover {
  background-color: #f5f7fa;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 8px;
}

.username {
  font-weight: 500;
  color: #333;
  margin-right: 8px;
}

.icon-chevron-down {
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* 轮播通知 */
.notification-carousel {
  position: relative;
  margin: 16px 24px;
  overflow: hidden;
  border-radius: 8px;
  background-color: #3498db;
  color: white;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.carousel-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  padding: 16px 24px;
  font-size: 14px;
  line-height: 1.5;
}

.carousel-indicators {
  position: absolute;
  bottom: 8px;
  right: 16px;
  display: flex;
  gap: 8px;
}

.carousel-indicators button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}

.carousel-indicators button.active {
  background-color: white;
  width: 24px;
  border-radius: 4px;
}
</style>
